<template>
	<view class="content">
		<!--图片上传-->
		<view class="content_1">
			<view class="upload_view">
				<view class="upload_title">封面图</view>
				<view class="title_line"></view>
				<view class="upload_box">
					<block v-for="(dataInfo, index) in CreateCoverPhoto" :key='index'>
						<image class="uploadimg_view" :src="dataInfo.show_url"  @click="delImg(index)"></image>
					</block>
					<view class="uploadimg_view" @click="imageRequest()">
						<image class="uploadimg" src="../../../../../static/mine/owner/photo.svg"></image>
					</view>
				</view>
			</view>
		</view>
		<!--下一步-->
		<view class="content_2">
			<view class="next" @click="toNext">下一步</view>
		</view>
	</view>
</template>

<script>
	//导入接口请求文件
	import {
		Request
	} from '../../../../../utils/request.js';
	import Config from '../../../../../utils/config.js';
	//定义getApp对象
	const app = getApp();
	export default {
		data() {
			return {
				houseimg: [],
				//封面图片
				CreateCoverPhoto: [],
			}
		},
		methods: {
			
			//删除图片
			delImg: function(index) {
				uni.showModal({
				    title: '提示',
				    content: '确认删除吗？',
				    success: (res) => {
							this.CreateCoverPhoto.splice(index, 1);
						},
					}
				)
			},
			
			//跳转下一步基础信息
			toNext: function() {
				if (this.CreateCoverPhoto.length <= 0) {
					uni.showToast({
						title: '未上传封面',
						position: 'center',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/mine/owner/goods/edit/editGoodsDetail?houseimg=' + JSON.stringify(this.CreateCoverPhoto) + '&goods_id=' + this.goods_id,
					});
				}
			},

			/**
			* 发送请求接口
			*/ 
			imageRequest: function(param = ''){
				if(this.CreateCoverPhoto.length >= 5){
					new Request().showToast('最多五张图');
					return;
				}
				new Request('goods/push/Create_Goods/CreateGoodsImg').uploadImage(
					()=>{
						return {
							'user': 'test',
							'openid': app.globalData.openid,
						}
					},
					(res)=>{
						//封面对象
						let fengmian = {
							'show_url': res.show_url,
							'system_url': res.system_url,
						}
						this.CreateCoverPhoto.push(fengmian);
					}
				);
			},
		},
		onLoad(option) {
			this.goods_id = option.goods_id;
			let url = 'goods/edit/Edit_Goods/EditGoodsDetail';
			new Request(url).request(
				() => {
					return 'POST'
				},
				()=>{
					return {
						'openid':app.globalData.openid,
						'userid':app.globalData.userid,
						'goods_id':this.goods_id
					}
				},
				(res)=>{
					console.log(res.data.data.photo_arr)
					for (let val of res.data.data.photo_arr) {
						this.CreateCoverPhoto.push({
							'show_url': Config.service.host + val,
							'system_url': val,
						});
					}
				}
			);
		}
	}
</script>

<style>
	.content {
		position: relative;
	}

	/*
		图片上传样式
	*/
	.content_1 {
		margin-top: 20upx;
		margin: 0 40upx;
	}

	.upload_view {
		height: auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 40upx;
		flex-wrap: wrap;
	}

	.upload_title {
		height: 40upx;
		line-height: 40upx;
		font-size: 28upx;
		color: #333333;
	}

	.title_line {
		height: 3upx;
		width: 120upx;
		background-color: #B3E9DC;
		margin-bottom: 20upx;
	}

	.upload_box {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.uploadimg_view {
		height: 120upx;
		width: 120upx;
		border-radius: 10upx;
		border: 2upx solid #BBBBBB;
		background-color: #e5e5e5;
		display: flex;
		align-items: center;
		margin-right: 40upx;
		margin-bottom: 20upx;
	}

	.uploadimg {
		width: 48upx;
		height: 48upx;
		margin: 0 auto;
	}

	/*
		下一步样式
	*/
	.content_2 {
		position: fixed;
		z-index: 999;
		right: 30upx;
		bottom: 90upx;
		height: 72upx;
		width: 250upx;
	}

	.next {
		height: 72upx;
		width: 250upx;
		border-radius: 10upx;
		background-color: #63D0D5;
		line-height: 72upx;
		font-size: 28upx;
		color: #FFFFFF;
		text-align: center;
	}
</style>
